<template>
	<view class="address">
		<view class="address-title">
			<view @click="iscut = true" :class="iscut?'select-address':''">常用地址</view>
			<view @click="iscut = false;modalName='add'" :class="!iscut?'select-address':''">新增地址</view>
		</view>
		<roc-scroll v-if="iscut" @loadData="loadData" :visible_height="visible_height" :hasMore="hasMore"
			refresher_background="#f5f5f5" :data_number="data_number" :solt_height="solt_height" background="#f5f5f5"
			footer_background="#f5f5f5">

			<view class="" slot="data-content">
				<view class="address-list">
					<view class="ad_card" v-for="(item,index) in data" :key="index" @click="choiceAddress(item)">
						<view class="head" style="font-weight: 500;">
							{{item.address}}
						</view>
						<view class="head">
							<view class="user_name" style="margin-right: 10rpx;">{{item.real_name}}</view>
							<view class="user_phone">{{item.mobile}}</view>
						</view>
						<image class="edit-icon" src="https://qiniu-cdn.maeiyun.com/imgs/mine/edit.png" mode=""
							@click.stop="editAddress(index)"></image>
					</view>
				</view>
			</view>
		</roc-scroll>

		<view class="modal" v-if="modalName == 'add'&& !iscut">
			<view class="card">
				<view class="cuIcon-close" @click="closeModal"></view>
				<view class="ad_line">
					<view class="line_l">联系人</view>
					<view class="inp_box">
						<input type="text" v-model="form.real_name" placeholder="联系人" class="inp"
							placeholder-style="color:#ccc;" />
					</view>
				</view>
				<view class="ad_line">
					<view class="line_l">电话</view>
					<view class="inp_box">
						<input type="number" v-model="form.mobile" placeholder="联系电话" class="inp"
							placeholder-style="color:#ccc;" />
					</view>
				</view>

				<view class="ad_line">
					<view class="line_l">地址</view>
					<view class="inp_box" @click="locFn()">
						<view>{{form.address?form.address:'请选择服务位置'}}</view>
						<text class="lg text-gray cuIcon-locationfill" style="margin-left: auto;"></text>
					</view>
				</view>
				<view class="ad_line">
					<view class="line_l">详细地址</view>
					<view class="inp_box">
						<input type="text" v-model="form.house_number" placeholder="详细地址，例: A座102室" class="inp"
							placeholder-style="color:#ccc;" />
						<!-- <text class="lg text-gray cuIcon-locationfill" @click="openLoaction()"></text> -->
					</view>
				</view>
				<view class="ad_line" @click="changeFormDefault()">
					<view class="check_box" :class="form.is_default == 1 ? 'checked' : ''">
						<text class="iconfont icon-duigou"></text>
					</view>
					<view class="default">设为默认地址</view>
				</view>

				<view class="submit" @click="saveAddress()">保存</view>
			</view>
		</view>
		<!-- <view class="add_btn" @click="showModal('add')">添加地址</view> -->
		<u-modal v-model="show" show-cancel-button @confirm="openLoaction" title="申请权限" content="将获取定位地址权限用于添加服务地址"></u-modal>

	</view>
</template>

<script>
	export default {
		name: "addressList",
		data() {
			return {
				modalName: null,

				// 滚动数据初始化
				visible_height: 60,
				solt_height: 0,
				page: 0,
				hasMore: true,
				data: [],
				data_number: 0,

				// 初始化表单数据
				form: {
					id: 0,
					real_name: '',
					province: '',
					city: '',
					district: '',
					address: '',
					lat: '',
					lng: '',
					is_default: 2,
					house_number: ''
				},
				disabled: false,
				choice: 0,
				back: 0,
				iscut: true,
				ident: false,
				show:false
			}
		},
		mounted(options) {
			// if (options.type) {
			// 	if (options.type == 'back') {
			// 		this.back = 1
			// 	}
			// }
			this.loadData(0)
		},
		methods: {
			choiceAddress(item) {
				this.$emit('addressResult', item)

			},
			//初始化信息
			initData() {
				this.disabled = false
				this.form = {
					id: 0,
					real_name: '',
					province: '',
					city: '',
					district: '',
					address: '',
					lat: '',
					lng: '',
					is_default: 2,
				}
			},

			initScrollData() {
				this.page = 0
				this.hasMore = true
				this.data = []
				this.data_number = 0
			},

			loadData(type, callback) {
				uni.showLoading({
					title: "加载中"
				})
				let opts = {
					url: "user_address/index",
					method: 'get'
				};

				if (type == 1) {
					this.initScrollData()
				}
				this.page++

				let param = {
					page: this.page,
				};

				this.request.httpTokenRequest(opts, param).then(res => {
					if (res.data.data.length < res.data.data.per_page)
						this.hasMore = false;
					// 把后端数据赋给页面	
					this.data = [...this.data, ...res.data.data];
					this.$parent.defaultAddress = this.data[0]
					this.data_number = this.data.length
					// 隐藏加载条 重置下拉 上拉状态
					uni.hideLoading()
					if (type) callback(false)
				}, error => {

				})
			},
			showModal(e) {
				this.modalName = e;
			},
			closeModal() {
				this.modalName = null
				this.initData()
			},
			//设置默认值
			setDefaultAddress(index) {
				let opts = {
					url: "user_address/address_set_default",
					method: 'post'
				};

				let param = {
					id: this.data[index].id,
				};

				this.request.httpTokenRequest(opts, param).then(res => {
					if (res.code == 0) {
						this.initScrollData()
						this.loadData(0)
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				}, error => {

				})
			},
			locFn(){
				if(!uni.getStorageSync('is_Address')){
					uni.setStorageSync('is_Address',true)
					this.show = true
				}else{
					this.openLoaction()
				}
			},
			openLoaction() {
				
				var that = this
				if (this.ident) {
					return
				}
				that.ident = true
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							keyword: "北京",
							success: function(result) {
								that.ident = false
								that.$util.transitionLocation(result.latitude, result.longitude,
									function(data) {
										if (data.code == 0) {
											that.form.lat = result.latitude
											that.form.lng = result.longitude
											that.form.province = data.data.province
											that.form.city = data.data.city
											that.form.district = data.data.district
											that.form.address = result.name
										}
									})
							},
							fail(err) {
								that.ident = false
							}
						});

					},
					fail(err) {
						that.ident = false
					}
				});

			},
			changeFormDefault() {
				if (this.form.is_default == 1) {
					this.form.is_default = 2
				} else {
					this.form.is_default = 1
				}
			},

			//保存地址
			saveAddress() {
				if (this.disabled)
					return

				if (!this.form.real_name || this.form.real_name.length < 2)
					return uni.showToast({
						title: "服务人姓名格式不正确",
						icon: "none",
					})

				let mobile = this.form.mobile;
				if (mobile == "" || (mobile.length != 11) || /^1[3456789]\d{9}$/.test(mobile) == false) {
					return uni.showToast({
						title: '请输入正确的手机号码！',
						icon: 'none'
					})
				}

				if (!this.form.address)
					return uni.showToast({
						title: '请输入服务地址！',
						icon: "none"
					});


				let opts = {
					url: 'user_address/save',
					method: 'post'
				};

				uni.showLoading({
					title: "地址保存中",
					icon: "none"
				})
				this.disabled = true

				this.request.httpTokenRequest(opts, this.form).then(res => {

					uni.hideLoading()
					if (res.code == 0) {
						//关闭模态框，清除信息
						this.iscut = true
						this.initData()
						this.initScrollData()
						this.loadData(0)
					}
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}, error => {

				})

			},

			//编辑地址
			editAddress(index) {
				this.iscut = false
				this.form = Object.assign({}, this.data[index])
				this.showModal('add')
			},

			//删除地址
			deleteAddress(index) {
				let opts = {
					url: "user_address/address_delete",
					method: 'get'
				};

				let param = {
					id: this.data[index].id,
				};

				this.request.httpTokenRequest(opts, param).then(res => {
					if (res.data.code == 1) {
						this.data.splice(this.operation_index, 1)
						if (this.data.length < 5) {
							this.initScrollData()
							this.loadData(0)
						}
					}
				}, error => {

				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.address {
		height: 100vh;
		background: $roc-color-f5;
		padding-top: 26rpx;
	}

	.address-title {
		width: 321rpx;
		height: 50rpx;
		background: #EBEBEB;
		border-radius: 29rpx;
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin: 26rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.select-address {
			width: 155rpx;
			height: 42rpx;
			background: #EF5233;
			border-radius: 29rpx;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 42rpx;
		}

		view {
			width: 155rpx;
			height: 42rpx;
			text-align: center;
			line-height: 42rpx;
			// margin-top: 4rpx;
		}

	}

	.address-list {
		background-color: $roc-color-f5;
		padding: 0 $roc-primary-padding-lr;
	}

	.check_box {
		width: 36rpx;
		height: 36rpx;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid $roc-color-ccc;
		margin-right: 10rpx;
		overflow: hidden;

		.icon-duigou {
			font-size: 20rpx;
			line-height: 1;
			color: #fff;
		}
	}

	.checked {
		background-color: $roc-color-233;
		border: 1px solid $roc-color-233;
	}

	.default {
		font-size: 26rpx;
		color: #000;
	}

	.ad_card {
		width: 100%;
		padding: 16upx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 10px;
		position: relative;

		.edit-icon {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 31rpx;
			top: 64rpx;
		}

		.head {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			padding: 12rpx 0;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #151616;
		}

		.ad {
			display: flex;
			align-items: center;
			padding: 12rpx 0;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #151616;

			.ad_icon {
				color: $roc-color-233;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.ad_txt {
				flex: 1;
				width: 0;
				font-size: 26rpx;
				color: #666;
			}
		}

		.menu {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.menu_l {
				display: flex;
				align-items: center;
				line-height: 1;

			}

			.menu_r {
				display: flex;
				align-items: center;

				.menu_cell {
					display: flex;
					align-items: center;
					line-height: 1;
					margin-left: 30rpx;
					color: #999;
					font-size: 24rpx;

					.iconfont {
						color: $roc-color-233;
						margin-right: 3px;
					}

					.icon-bianji {
						font-size: 40rpx;
					}
				}
			}
		}
	}

	.add_btn {
		position: fixed;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 40px;
		border-radius: 20rpx;
		background-color: $roc-color-233;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 1px;
		font-size: 30rpx;
		font-weight: 700;
	}

	.modal {
		// position: fixed;
		// top: 0;
		// left: 0;
		// z-index: 90;
		// width: 100%;
		// height: 100%;
		// background-color: rgba($color: #000000, $alpha: 0.7);
		padding: 30rpx;

		.card {
			// position: absolute;
			// bottom: 0;
			// left: 0;
			// z-index: 91;
			width: 100%;
			padding: 30rpx $roc-primary-padding-lr;
			border-radius: 30rpx 30rpx 0 0;
			background-color: #fff;
			overflow-y: scroll;

			.cuIcon-close {
				position: absolute;
				z-index: 92;
				top: 20rpx;
				right: 20rpx;
				font-size: 32rpx;
				color: #000;
			}

			.ad_line {
				height: 56px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid $roc-color-f7;

				.line_l {
					width: 140rpx;
					font-size: 30rpx;
					color: #000;
					flex-shrink: 0;
				}

				.inp_box {
					display: flex;
					align-items: center;
					flex: 1;
					height: 52px;

					.inp {
						flex: 1;
						color: #000;
						font-size: 28rpx;
						line-height: 1;
					}

					.choice-icon {
						flex-shrink: 0;
						height: 52px;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 20rpx;
					}
				}

				.line_r {
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: space-between;

					.icon-dingwei {
						flex-shrink: 0;
						margin-left: 16rpx;
						font-size: 36rpx;
						color: $roc-color-light-yellow;
					}

					.location {
						flex: 1;
					}

					.ccc {
						color: #ccc;
					}
				}
			}

			.pos {
				align-items: flex-start;
			}

			.submit {
				width: 100%;
				height: 40px;
				border-radius: 30rpx;
				background-color: $roc-color-233;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 1px;
				margin-top: 30px;
				// position: fixed;
				// bottom: 40rpx;
				// left: 0;
				// right: 0;
			}
		}
	}
</style>